<template>
  <div id="chart">
    <h3 style="display: inline-block;margin-right: 10px;">采购</h3>
    <h3 style="display: inline-block">销货</h3>
    <div id="mychart">

      <p>
        <el-button size="small">近一周</el-button>
        <el-button size="small">近一月</el-button>
        <el-button size="small">近一年</el-button>
      </p>
      <div id="myChart" ref="myChart" style="width: 70%;height:320px;"></div>
    </div>
    <h3>资产明细</h3>
    <ul>
      <li>
        <h5>库存</h5>
        <div ref="storeCircle" style="width: 300px;height:300px;"></div>
      </li>
      <li>
        <h5>资金</h5>
        <div ref="moneyCircle" style="width: 300px;height:300px;"></div>
      </li>
      <li>
        <h5>欠款</h5>
        <div ref="debtCircle" style="width: 300px;height:300px;"></div>
      </li>
    </ul>


  </div>


</template>

<script>
export default {
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ],
        color: ['#8dcfff']
      },
      storeCircleOption: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '库存',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            // padAngle: 5
            // itemStyle: {
            //   borderRadius: 5
            // },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '默认库存' },
              { value: 735, name: '冷藏库' },
            ],
            color: ['#45dad1', "#40a9ff"]
          }
        ]
      },
      moneyCircleOption: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '资金',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            // padAngle: 5,
            // itemStyle: {
            //   borderRadius: 10
            // },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '现金' },
              { value: 735, name: '银行存款' },
            ],
            color: ['#ffb946', '#58d9ff']
          }
        ]
      },
      debtCircleOption: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '欠款',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            // padAngle: 5,
            // itemStyle: {
            //   borderRadius: 10
            // },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '客户欠款' },
              { value: 735, name: '供应商存款' },
            ],
            color: ['#ae73f8', '#ff808f']
          }
        ]
      }
    }
  },
  methods: {
    gertChars() {
      // console.log(this.$echarts)
      let myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption(this.option)
      let storeCircle = this.$echarts.init(this.$refs.storeCircle)
      storeCircle.setOption(this.storeCircleOption)
      let moneyCircle = this.$echarts.init(this.$refs.moneyCircle)
      moneyCircle.setOption(this.moneyCircleOption)
      let debtCircle = this.$echarts.init(this.$refs.debtCircle)
      debtCircle.setOption(this.debtCircleOption)
    }
  }
  ,
  mounted() {
    this.gertChars()
  }
}
</script>

<style scoped>
#chart {
  width: 100%;
  height: 100%;
}

#mychart {
  width: 75%;
  height: 340px;
  background-color: #f5f6f8;
  margin-bottom: 10px;
}

#mychart>p {
  margin-left: 720px;
  position: relative;
  top: 20px;
}

ul>li {
  list-style: none;
  float: left;
  width: 360px;
  height: 320px;
  background-color: #f5f6f8;
  margin-right: 10px;
  border-radius: 10px;
}

li>div {
  margin-left: 50px;
}

li>h5 {
  margin-left: 10px;
  margin-top: 10px;
}
</style>